<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <span class="state">
          <img src="/@/assets/images/table.png" alt="" />
          签约进度跟进信息表
        </span>
        <a-form layout="inline" class="query-form" :model="queryForm">
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.bussNo" placeholder="请输入业务编号" />
          </a-form-item>
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.custName" placeholder="请输入承租人姓名" />
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model="queryForm.signStatus" placeholder="选择签约状态">
              <a-option label="全部" value="0" />
              <a-option label="签约中" value="1" />
              <a-option label="签约完成" value="2" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-range-picker separator="≒">
              <template #suffixIcon>
                <SmileOutlined />
              </template>
            </a-range-picker>
          </a-form-item>

          <a-form-item>
            <a-button class="submit" type="primary" @click="onSubmit">查询</a-button>
            <a-button>重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :pagination="false" :dataSource="dataSource" :columns="columns" :scroll="{ y: '63vh' }">
        <template #index="{ record, index }">
          <span>{{ index + 1 }}</span>
        </template>
        <template #operate="{ record }">
          <span class="operate-btn">查看</span>
        </template>
        <template #signStatus="{ record }">
          <a-button type="link" style="color: #15ce19" v-if="record.signStatus == '01'">签约完成</a-button>
          <a-button type="link" style="color: #1169e5" v-else-if="record.signStatus == '02'">签约中</a-button>
        </template>
      </a-table>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />
    </div>
  </div>
</template>

<script>
  import ThePagination from '/@/components/system/the-pagination/index.vue';
  export default {
    components: {
      ThePagination,
    },
    data() {
      return {
        queryForm: {
          signStatus: '',
          custName: '',
          bussNo: '0',
        },
        dataSource: [
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-HZ-202502-0026',
            createTime: '2025-02-27 16:55:03',
            signStatus: '02',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约中',
            bussNo: 'NJZL-HZ-202502-0021',
            createTime: '2025-02-27 09:40:27',
            signStatus: '01',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-HZ-202502-0013',
            createTime: '2025-02-21 09:50:15',
            signStatus: '02',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约中',
            bussNo: 'NJZL-HZ-202502-0011',
            createTime: '2025-02-20 08:42:36',
            signStatus: '01',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-FR-202502-0003',
            createTime: '2025-02-18 08:40:29',
            signStatus: '02',
            sponsorName: '谢卓芯',
            custName: '哈尔滨久泰裕邦农业服务有限公司',
          },
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-HZ-202501-0096',
            createTime: '2025-01-16 14:18:56',
            signStatus: '02',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-HZ-202501-0033',
            createTime: '2025-01-09 11:05:53',
            signStatus: '02',
            sponsorName: '赵思泽',
            custName: '公维鑫',
          },
          {
            signStatusDesc: '签约中',
            bussNo: 'HWZL-LS-202501-0004',
            createTime: '2025-01-06 10:04:48',
            signStatus: '01',
            sponsorName: '时成志',
            custName: '时成志',
          },
          {
            signStatusDesc: '签约完成',
            bussNo: 'NJZL-HZ-202412-8104',
            createTime: '2024-12-13 09:18:16',
            signStatus: '02',
            sponsorName: '韩双伦',
            custName: '宋晓东',
          },
          {
            signStatusDesc: '签约中',
            bussNo: 'HWZL-FR-202411-0009',
            createTime: '2024-11-28 14:07:29',
            signStatus: '01',
            sponsorName: '赵思泽',
            custName: 'esigntest哈银金融租凭有限责任公司PAAD',
          },
        ],
        columns: [
          {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            slots: { customRender: 'index' },
            width:70
          },
          {
            title: '业务编号',
            key: 'bussNo',
            dataIndex: 'bussNo',

          },
          {
            title: '承租人',
            key: 'custName',
            dataIndex: 'custName',
            width:270
          },
          {
            title: '主办人',
            key: 'sponsorName',
            dataIndex: 'sponsorName',
          },
          {
            title: '生成时间',
            key: 'createTime',
            dataIndex: 'createTime',
          },
          {
            title: '签约状态描述',
            key: 'signStatusDesc',
            dataIndex: 'signStatusDesc',
          },
          {
            title: '签约状态',
            key: 'signStatus',
            dataIndex: 'signStatus',
            slots: { customRender: 'signStatus' },
          },
          {
            title: '操作',
            key: 'operate',
            dataIndex: 'operate',
            slots: { customRender: 'operate' },
          },
        ],
      };
    },
  };
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    .query {
      width: 100%;
      display: flex;
      margin: 24rem 0;
      box-sizing: border-box;
      .state {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 22rem;
        color: #1169e5;
        margin-right: 200rem;
        img {
          width: 20rem;
          height: 19rem;
          margin-right: 14rem;
        }
      }
      .form {
        float: 1;
        display: flex;
      }
    }
    .list {
      flex: 1;
      padding: 1rem 0 0 24rem;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      .card {
        margin: 0 30rem 30rem 0;
      }
    }
  }
</style>
